<template>
    <div class="home">
        <!-- 内容 -->
        <div class="container" >
            <router-view/>
        </div>

        <!-- 发布的遮罩层 -->
        <div class="send-mask" v-show="sendShow" @click="sendShow=false">
            <div class="send-box">
                <div class="send" @click="sendEntry">
                    <div class="icon-box">
                        <svg t="1636965859003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3944" width="200" height="200"><path d="M1024 210.744889V784.782222C1024 854.072889 965.034667 910.222222 892.330667 910.222222H131.697778C58.965333 910.222222 0 854.072889 0 784.810667V210.773333C0 141.482667 58.965333 85.333333 131.669333 85.333333H892.302222C965.034667 85.333333 1024 141.482667 1024 210.744889z m-640.739556 426.382222H184.32c-24.291556 0-43.889778 18.659556-43.889778 41.813333 0 23.096889 19.626667 41.784889 43.889778 41.784889h198.940444c24.291556 0 43.889778-18.688 43.889778-41.813333s-19.598222-41.813333-43.889778-41.813333zM128 312.888889a42.666667 42.666667 0 0 0 0 85.333333h768a42.666667 42.666667 0 0 0 0-85.333333h-768z" p-id="3945"></path></svg>
                    </div>
                    <p>词条</p>
                </div>
                <div class="send">
                    <div class="icon-box">
                        <svg t="1636965945240" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5485" width="200" height="200"><path d="M895.8 762.7v11.1c0.1-1.8 0.2-3.7 0.2-5.6 0-1.8 0-3.7-0.2-5.5z" p-id="5486"></path><path d="M853.6 204c-7.8-0.6-15.4 2.3-20.9 7.8-5.5 5.5-8.4 13.1-7.8 20.9v574.4c-2 30.7-26.3 55.2-56.9 57.4H267.1c-34.3 0-74.1-28.7-74.1-57.4v-64.3c0-28.7 34.3-46.3 68.5-46.3h478.2c7.8 0.6 15.4-2.3 20.9-7.8 5.5-5.5 8.4-13.1 7.8-20.9V198.5c0.6-29.5-11.6-57.8-33.4-77.7-21.8-19.9-51.2-29.3-80.5-26H267.1c-63 0-125.4 34.7-125.4 103.7v631.8c10.4 53 54.5 92.7 108.3 97.7h518.4c61.1 0.1 111.4-48.2 113.9-109.2V233.7c-0.9-15.5-13.2-27.8-28.7-28.7v-1zM743.4 755.3H280.6c-15.8 0-28.7 12.9-28.7 28.7 0 15.9 12.9 28.7 28.7 28.7h462.9c15.8 0 28.7-12.9 28.7-28.7-0.1-15.8-12.9-28.7-28.8-28.7z m0 0" p-id="5487"></path></svg>
                    </div>
                    <p>请求</p>  
                </div>
                <div class="send">
                    <div class="icon-box">
                        <svg t="1636965992890" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6423" width="200" height="200"><path d="M883.7 301.2H532.3c-42.7 3.9-76.3 39.9-76.3 83.5V664.4c0 46.3 37.7 83.9 84 83.9h75.8L792 891V748.4h84c46.3 0 84-37.6 84-83.9V384.8c0-43.7-33.6-79.7-76.3-83.6z" fill="#47444F" p-id="6424"></path><path d="M530.5 261.2H680v-44.3c0-46.3-37.7-83.9-84-83.9H148c-46.3 0-84 37.7-84 83.9v335.7c0 46.3 37.7 83.9 84 83.9h28v142.1l177.8-142.1H416V384.8c0-31.1 11.6-60.8 32.7-83.7 20.9-22.8 49.3-36.8 80-39.6l1.8-0.3z" fill="#47444F" p-id="6425"></path></svg>
                    </div>
                    <p>杂谈</p>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <footer class="app-footer">
            <router-link to="/home/home-main" active-class="active">
                <svg t="1636542947741" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4313" width="200" height="200"><path d="M887.653147 861.950254c0 53.44012-43.324738 96.762811-96.764857 96.762811L230.594377 958.713065c-53.44012 0-96.763834-43.322691-96.763834-96.762811L133.830543 162.05077c0-53.439096 43.323715-96.763834 96.763834-96.763834l560.294936 0c53.44012 0 96.764857 43.323715 96.764857 96.763834L887.65417 861.950254zM831.814398 162.05077c0-22.602787-18.322297-40.925085-40.925085-40.925085L230.594377 121.125685c-22.602787 0-40.925085 18.322297-40.925085 40.925085l0 699.898461c0 22.602787 18.322297 40.924061 40.925085 40.924061l560.294936 0c22.602787 0 40.925085-18.321274 40.925085-40.924061L831.814398 162.05077z" p-id="4314"></path><path d="M329.266677 944.754145c-7.715729 0-13.959943-6.244214-13.959943-13.960966L315.306734 93.206822c0-7.716752 6.244214-13.959943 13.959943-13.959943 7.702426 0 13.959943 6.244214 13.959943 13.959943l0 837.586356C343.22662 938.50993 336.96808 944.754145 329.266677 944.754145z" p-id="4315"></path><path d="M727.498564 874.955452 498.527662 874.955452c-7.716752 0-13.959943-6.244214-13.959943-13.960966 0-7.714705 6.244214-13.95892 13.959943-13.95892l228.970902 0c22.030759 0 48.477085-26.39209 48.477085-67.236334l0-44.442188c0-7.714705 6.244214-13.95892 13.960966-13.95892 7.715729 0 13.95892 6.244214 13.95892 13.95892l0 44.442188C803.894512 837.602729 766.487553 874.955452 727.498564 874.955452z" p-id="4316"></path><path d="M779.396561 678.818353c-3.774977 0-7.265474-1.404999-9.910721-4.049223-2.52245-2.52245-4.048199-6.148024-4.048199-9.911744 0-3.6399 1.52575-7.265474 4.048199-9.911744 5.166673-5.030573 14.518668-5.166673 19.672038 0 2.65855 2.64627 4.199649 6.271844 4.199649 9.911744 0 3.76372-1.541099 7.253194-4.049223 9.911744C786.649755 677.413354 783.023158 678.818353 779.396561 678.818353z" p-id="4317"></path><path d="M692.218036 378.425795c-2.058892 0-4.116761-0.449231-6.02625-1.376347l-77.732385-37.244252-77.733409 37.244252c-4.321422 2.098801-9.405207 1.785669-13.467733-0.763386-4.049223-2.563382-6.516414-7.020904-6.516414-11.819187L510.741845 93.206822c0-7.716752 6.244214-13.959943 13.959943-13.959943l167.516248 0c7.715729 0 13.95892 6.244214 13.95892 13.959943l0 271.25903c0 4.798283-2.466168 9.255805-6.515391 11.819187C697.399035 377.703341 694.808024 378.425795 692.218036 378.425795zM608.460424 310.37184c2.057869 0 4.130064 0.463558 6.025227 1.37737l63.772442 30.549783L678.258093 107.166765 538.661731 107.166765l0 235.133252 63.772442-30.549783C604.329337 310.836421 606.401532 310.37184 608.460424 310.37184z" p-id="4318"></path></svg>
                <p>首页</p>
            </router-link>
            <router-link to="/home/find" active-class="active" exact>
                <svg t="1636543130923" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15281" width="200" height="200"><path d="M648.533333 674.474667a34.133333 34.133333 0 0 1 34.048 31.607466l0.085334 2.542934v51.2a68.266667 68.266667 0 0 1-64.853334 68.181333l-3.413333 0.085333H409.6a68.266667 68.266667 0 0 1-68.181333-64.853333l-0.085334-3.413333v-51.2a34.133333 34.133333 0 0 1 68.181334-2.56l0.085333 2.56v51.2h204.8v-51.2a34.133333 34.133333 0 0 1 34.133333-34.133334zM597.333333 871.1168a34.133333 34.133333 0 0 1 2.56 68.164267l-2.56 0.1024H426.666667a34.133333 34.133333 0 0 1-2.56-68.181334l2.56-0.085333h170.666666z" fill="#444444" p-id="15282"></path><path d="M512 51.2c197.9392 0 358.4 160.4608 358.4 358.4 0 145.749333-80.554667 272.7936-208.213333 328.567467a34.133333 34.133333 0 0 1-27.306667-62.549334C737.28 630.852267 802.133333 528.5888 802.133333 409.6c0-160.238933-129.8944-290.133333-290.133333-290.133333s-290.133333 129.8944-290.133333 290.133333c0 118.9888 64.836267 221.252267 167.253333 266.018133a34.133333 34.133333 0 0 1-27.306667 62.549334C234.154667 682.3936 153.6 555.349333 153.6 409.6 153.6 211.6608 314.0608 51.2 512 51.2z" fill="#444444" p-id="15283"></path><path d="M490.018133 204.868267L494.933333 204.8v68.266667c-64.477867 0-117.230933 51.421867-119.3984 115.370666L375.466667 392.533333a34.133333 34.133333 0 0 1-68.181334 2.56L307.2 392.533333c0-101.888 81.527467-185.053867 182.818133-187.665066z" fill="#00B386" p-id="15284"></path></svg>                
                <p>发现</p>
            </router-link>
            <a href="#" @click="changeSendState">
                <div class="send">
                    <svg t="1636542431852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1874" data-spm-anchor-id="a313x.7781069.0.i2" width="200" height="200"><path d="M554.666667 170.666667l0 682.666666-85.333334 0L469.333333 170.666667z" fill="#ffffff" p-id="1875"></path><path d="M853.333333 469.333333l0 85.333334-682.666666 0L170.666667 469.333333z" fill="#ffffff" p-id="1876"></path></svg>
                </div>
            </a>
            <router-link to="/home/message" active-class="active" >
                <svg t="1636543181373" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16129" width="200" height="200"><path d="M286.077016 289.647843c-26.568099 0-48.182372 21.600971-48.182372 48.151673 0 26.568099 21.614274 48.183396 48.182372 48.183396 26.569122 0 48.184419-21.615297 48.184419-48.183396C334.262458 311.24779 312.646138 289.647843 286.077016 289.647843zM419.834392 289.647843c-26.568099 0-48.183396 21.600971-48.183396 48.151673 0 26.568099 21.615297 48.183396 48.183396 48.183396 26.550703 0 48.151673-21.615297 48.151673-48.183396C467.986065 311.24779 446.385095 289.647843 419.834392 289.647843zM553.591769 294.00815c-26.569122 0-48.184419 21.61632-48.184419 48.184419 0 26.550703 21.615297 48.15065 48.184419 48.15065 26.549679 0 48.15065-21.599947 48.15065-48.15065C601.742419 315.623447 580.142471 294.00815 553.591769 294.00815zM869.579513 381.572462 773.79703 381.572462 773.79703 177.442318c0-57.651025-46.90324-104.554264-104.556311-104.554264L170.396343 72.888054c-57.633628 0-104.522542 46.902216-104.522542 104.554264l0 336.572572c0 57.043181 45.9004 103.563704 102.696963 104.539938l-1.116427 150.198837L384.239709 619.011222l0 118.800733c0 48.761564 39.670511 88.432075 88.431052 88.432075l224.653573 0 179.914626 124.307144-0.884137-124.563994c45.605687-3.473101 81.653695-41.693588 81.653695-88.175225L958.008518 470.001467C958.008518 421.240927 918.340053 381.572462 869.579513 381.572462zM368.913653 567.336306l-149.515269 103.256712 0.766456-103.256712-49.767474 0c-29.384237 0-53.290717-23.919782-53.290717-53.321416L117.10665 177.442318c0-29.402657 23.905456-53.323463 53.290717-53.323463l498.844376 0c29.401634 0 53.322439 23.920806 53.322439 53.323463l0 336.572572c0 29.401634-23.920806 53.321416-53.322439 53.321416L368.913653 567.336306zM906.777717 737.811955c0 20.511149-16.687054 37.198204-37.198204 37.198204l-44.843324 0 0.565888 77.382415-112.014166-77.382415L472.670761 775.010159c-20.511149 0-37.199227-16.687054-37.199227-37.198204L435.471534 618.571201l233.768161 0c57.653071 0 104.556311-46.904263 104.556311-104.556311l0-81.210603 95.783507 0c20.511149 0 37.198204 16.687054 37.198204 37.19718L906.777717 737.811955z" p-id="16130"></path></svg>
                <p>消息</p>
            </router-link>
            <router-link :to="userToken==null?{path:'/home/my-unlogin'}:{path:'/home/my'}" active-class="active" exact>
                <svg t="1636543236157" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18408" width="200" height="200"><path d="M512 599.900583c-165.406093 0-299.968593-134.562499-299.968593-299.944191S346.593907 0 512 0s299.956392 134.562499 299.956392 299.956392S677.393892 599.900583 512 599.900583z m0-553.256968c-139.686831 0-253.324977 113.638147-253.324977 253.312777s113.638147 253.300575 253.324977 253.300575 253.312776-113.638147 253.312776-253.300575S651.67463 46.643615 512 46.643615z" p-id="18409"></path><path d="M512 463.178544a106.537287 106.537287 0 0 1-90.17603-49.413195l19.64327-12.566812a83.660809 83.660809 0 0 0 144.103516-5.148733l20.509526 11.114919a106.939913 106.939913 0 0 1-94.080282 56.013821zM987.95277 1024H36.04723l1.598304-24.828605C53.67737 749.982485 262.03024 554.782066 512 554.782066s458.347031 195.21262 474.366667 444.438132zM86.521894 977.295381h850.956212c-26.097487-212.68415-208.389472-375.906302-425.478106-375.906302S112.655983 764.586829 86.521894 977.295381z" p-id="18410"></path></svg>
                <p>我的</p>
            </router-link>
        </footer>

    </div>
</template>
<script>
import { mapState,mapMutations} from "vuex"
export default {
    name:"Home",
    data(){
        return {
            sendShow:false
        }
    },
    computed:{
        ...mapState(["userToken"]),
    },
    methods:{
        ...mapMutations(["setUserToken"]),
        changeSendState(){
            this.sendShow =true;
        },
        sendEntry(){
            this.$router.push({path:"/sendEntry"})
        }
    },
    mounted(){
        if(localStorage.userToken!=undefined){
           this.setUserToken(localStorage.userToken);
        }
    },
    beforeRouteLeave(to,from,next){
        this.$store.state.fromPagePath =from.path;
        if(to.path == "/sendEntry"){
            // 记录词条创建的时间
            let date =new Date();
            let yy = date.getFullYear();
            let mm = date.getMonth();
            let dd = date.getDate();
            let h = date.getHours();
            let m = date.getMinutes();
            yy = yy < 10 ? "0" + yy : yy;
            mm = mm < 10 ? "0" + mm : mm;
            dd = dd < 10 ? "0" + dd : dd;
            h  = h  < 10 ? "0" + h  : h ;
            m  = m  < 10 ? "0" + m  : m ;
            let str= `${yy}-${mm}-${dd} ${h}:${m}`;
            this.$store.commit("entry/saveEntryCreateTime",str);
            // 设置词条id
            // this.$store.commit("entry/setEntryId");
        }
        next();
    }
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.container{
    // position: absolute;
    // top: 50px;
    // left: 0;
    height: (100%-15);
    overflow-y:scroll;
    // background-color: #f0f0f0;
}

.send-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: .5);
    z-index: 200;
    .send-box{
        position: absolute;
        left: 0;
        bottom: 80px;
        display: flex;
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
        .send{
            flex-grow: 1;
            text-align: center;
            .icon-box{
                width: 65px;
                height: 65px;
                background-color: #fff;
                box-shadow: 0 0 0px 5px #b9b9b9;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
                .icon{
                    width: 30px;
                    height: 30px;
                    path{
                        fill:$mainCol ;
                    }
                }
            }
            p{
                font-size: 14px;
                font-weight: bold;
                color: #fff;
                margin-top: 20px;
            }
        }

    }
}

.app-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f0f0f0;
    z-index: 100;
    a{
        display: block;
        flex-grow: 1;
        height: 100%;
        text-align: center;
        box-sizing: border-box;
        .icon{
            width: 22px;
            height: 22px;
            margin-top: -5px;
        }
        p{
            color: #555;
            font-size: 12px;
            margin-top: -5px;
        }
        .send{
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 10px;
            margin: 10px auto;
            background-color: $mainCol;
            text-align: center;
            // padding: 10px 10px;
            // box-sizing: border-box;
        }
        &.active{
            p{
                color:$mainCol;
            }
            .icon{
                path{
                    fill:$mainCol;
                }
            }
        }
    }
}

</style>